// 改变主题色变量
// 变 icon 字体路径变量，必需 
// $–font-path: '~element-ui/lib/theme-chalk/fonts';
// 之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
// @import '~element-ui/packages/theme-chalk/src/index';

// 时间选择范围样式
.rangedate.el-range-editor.el-input__inner {
  background-color: #002347;
  height: 28px;
  border-color: #718DB1;

  .el-range-input {
    background-color: #002347;
  }

  .el-range__icon {
    line-height: 20px;
  }

  .el-range-separator {
    line-height: 20px;
    color: #fff;
  }
}

// 分页样式
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #363657;
  background: rgba(31, 155, 253, 0.2);
  color: #fff;
}

.el-table th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
  background-color: #363657;
}

.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: #363657;
}

// 表格筛选样式
.el-popover,
.el-table-filter {
  background-color: #002347;
  border-color: #002347;

  .el-table-filter__wrap,
  .el-scrollbar__wrap {
    margin-bottom: -4px !important
  }

  .el-table-filter__bottom button {
    background: 0 0;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    padding: 0 3px;
  }

  .el-table-filter__bottom button:hover {
    color: #086cf3;
  }

  .el-table-filter__checkbox-group .el-checkbox {
    color: #fff;
  }

  .el-input {
    .el-input__inner {
      display: inline-block;
      background-color: #002347;
      // max-width: 110px;
      height: 28px;
      border-color: #718DB1;
    }
  }

  .search-input {
    text-align: left;
    margin-bottom: 6px;

    input {
      padding-left: 5px;
      padding-right: 5px;
      width: 140px;
      height: 28px;
      line-height: 28px;
      background-color: transparent;
      border: 1px solid #718db1;
      border-radius: 5px;
      color: #fff;
      outline: none;
    }
  }

  .headerTable-bottom {
    text-align: right;
    margin-top: 10px;
    border-top: 1px solid #0E2E50;
  }

  .el-checkbox__inner {
    background-color: #002347;
    border-color: #6581A5 !important;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #F19439;
  }
}

// el-card样式 首页的card样式
.box-card {
  margin-bottom: 16px;
}

.el-card.box-card {
  border-radius: 2px;
  border: none;

  .homeBtn {
    width: auto;
    height: 30px !important;
    line-height: 0;
    padding: 8px 15px !important;
    color: $default-btn-text-color !important;
    background-color: $card-btn-bg-color !important;
    border: 1px solid $default-btn-border-color !important;
  }

  .el-card__header {
    background-color: $card-header-bg-color;
    color: $card-color;
    border-bottom: 1px solid $border-color;
    padding: 0;
  }

  .el-card__body {
    background-color: $card-body-bg-color;
    color: $card-color;
    padding: 16px;
  }

  .self-header {
    // height: 50px;
    height: 40px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 16px;
    }

    .el-form.search {
      display: flex;
      align-items: center;

      .el-select {
        width: 200px !important;
      }

      .el-form-item {
        margin-bottom: 0;
      }

      .el-form-item:last-child {
        margin-right: 0;
      }
    }
  }
}

// loading样式
.el-loading-mask {
  background-color: transparent !important;
}

.loading-main {
  z-index: 9999 !important;
}

// message-box弹出框样式
.el-message-box__wrapper {
  .el-message-box {
    background-color: $moudle-color;
    border: none;
    border-radius: 2px;

    .el-message-box__header {
      border-bottom: 1px solid $border-color;
      border-top: 4px solid $highlight-color;
      height: 50px;

      .el-message-box__title {
        color: $title-color;
        font-size: 16px;
      }

      .el-message-box__close {
        color: $highlight-color;
      }
    }

    .el-message-box__content {
      color: $text-color;
      padding: 20px 16px;
      display: flex;
      align-items: center;
      justify-content: center;

      .el-message-box__status {
        color: $prompt-warning-color;
      }
    }

    .el-message-box__btns {
      color: $title-color;
      border-top: 1px solid $border-color;
      height: 65px;
      line-height: 65px;
      text-align: center;

      .el-button--default {
        border-radius: 2px;
        width: 80px;
        height: 30px !important;
        line-height: 0;
        padding: 12px 15px !important;
        color: $default-btn-text-color !important;
        background-color: $default-btn-bg-color !important;
        border: 1px solid $default-btn-border-color !important;
      }

      .el-button--primary {
        border-radius: 2px;
        width: 80px;
        height: 30px !important;
        line-height: 0;
        padding: 12px 15px !important;
        color: $default-btn-text-color !important;
        background-color: $default-btn-mousedown-bg-color !important;
        border: 1px solid $default-btn-mousedown-bg-color !important;
      }
    }
  }
}

// 弹出框样式
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: $backgroud-color;
  border: 1px solid $border-color;

  .el-dialog__title {
    color: #fff;
    font-size: 18px;
  }

  .el-dialog__body {
    color: #fff;
    padding: 10px 20px;
  }

  .el-dialog__footer {}
}

// checkbox样式
.el-checkbox {
  .el-checkbox__inner {
    background-color: $checkbox-unchecked-bg-color;
    border-color: $checkbox-unchecked-border-color !important;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $checkbox-checked-bg-color;
    border-color: $checkbox-checked-border-color !important;
  }
}

// 表格样式
/* 表格单元格内含输入框的样式 */
.table-cell-input {
  .el-input__inner {
    height: 30px;
    line-height: 30px;
    border: 1px solid $border-color;
    color: $serach-label-color !important;
    background-color: $input-bg-color;

    input {
      background-color: $input-bg-color;
      color: $input-text-color;
    }

    &:hover {
      border-color: $input-hover-border-color;
      color: $input-text-color;
    }

    &:focus {
      border-color: $input-hover-border-color;
      color: $input-text-color;
      box-shadow: 0px 0px 4px 0px rgba(241, 148, 57, 0.2);
    }

    .el-range-separator,
    .el-range__icon,
    .el-range__close-icon {
      line-height: 22px;
      color: $input-text-color;
    }
  }
}

.scroll-table {
  .el-table__fixed-body-wrapper {
    top: 46px !important;
  }

  height: 400px;

  .el-scrollbar__wrap {
    .el-scrollbar__view {
      width: 100%;
      display: inline-block;
    }
  }

  .is-vertical {
    width: 6px !important;
    z-index: 99;
    position: absolute;
  }

  .is-horizontal {
    height: 6px !important;
    z-index: 99;
    position: absolute;
  }
}

.el-table--border td {
  border: none;
}

.el-table--border th {
  border-right: 1px solid $table-border-color;
  // border: none;
}

// 表格右侧白线
.el-table--border::after,
.el-table--group::after {
  display: none !important;
}

.el-table {
  border: none;

  // 多个表头
  &.el-table--border,
  &.el-table--group {
    border: none;
  }

  thead {
    background: $table-bg-color;
    border-bottom: 1px solid;
    border-color: $table-border-color;
    color: $title-color;

    &.is-group th {
      background: $table-bg-color;
      border-bottom: 1px solid;
      border-color: $table-border-color;
      color: $title-color;
    }

    // &.is-group tr:first-child th {
    //   background: $table-title-first-bg-color;
    // }
  }

  background-color: transparent;

  tr {
    background-color: transparent;

    th {
      background-color: transparent;
    }
  }

  &::before {
    height: 0;
  }

  // 表格滚动条
  .el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: auto;
  }

  .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: auto;
  }

  .el-table__body-wrapper {
    z-index: 3;
  }

  // 表格暂时无数据
  .el-table__empty-block {
    width: 100% !important;
    min-height: 160px !important;
  }

  // 表格悬浮高亮 之前代码表格高亮写了好几处 全部注释 所有表格高亮就这一段代码
  .el-table__body .el-table__row.hover-row td {
    background: $table-highlight-bg-color !important;

    .cell {
      color: $table-highlight-color;
    }
  }

  .el-table__body .el-table__row:hover td {
    background: $table-highlight-bg-color !important;

    .cell {
      color: $table-highlight-color;
    }
  }

  // 当手写table鼠标移上去 并不能添加hover-row时 可以用以下css高亮
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background: $table-highlight-bg-color;
    color: $table-highlight-color;
  }

  // 点击高亮当前行
  .el-table__body tr.current-row>td {
    background: $table-highlight-bg-color !important;
    color: $table-highlight-color !important;
  }

  // 表头
  .el-table__header-wrapper,
  .el-table__fixed-header-wrapper {
    background: $table-bg-color;
    border-bottom: 1px solid;
    border-color: $table-border-color;

    .el-table__header {
      height: 48px;
      line-height: 48px;

      thead {
        tr {
          background: $table-bg-color;

          th {
            color: $title-color;
            font-weight: 400;
            padding: 0;
          }

          .is-leaf {
            border-bottom: none;
          }
        }
      }

      .el-checkbox {
        .el-checkbox__inner {
          background-color: $checkbox-unchecked-bg-color;
          border-color: $checkbox-unchecked-border-color !important;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner,
        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
          background-color: $checkbox-checked-bg-color;
          border-color: $checkbox-checked-border-color !important;
        }
      }

      // 自定义表头内容样式 hide.js 好像没用到 
      .self-header-column {
        height: 22.5px;
        display: inline-block;

        .self-checkbox-header {
          display: none;
          margin-right: 10px;
        }

        .el-icon-view {
          display: none;
          margin-left: 8px;
          cursor: pointer;
        }

        &:hover {

          .self-checkbox-header,
          .el-icon-view {
            display: inline-block;
          }
        }

        .el-icon-d-arrow-right {
          cursor: pointer;
          display: none;
        }

        .self-hiden-line {
          width: 1px;
          height: 51px;
          background: #9cb5d6;
          display: none;
        }
      }

      .no-checked-column {

        .self-checkbox-header,
        .el-icon-view {
          display: none;
        }
      }

      .checked-column {

        .self-checkbox-header,
        .el-icon-view {
          display: inline-block;
        }
      }

      .self-header-hiden-column {
        display: inline-block;

        .self-header-column &:hover,
        span,
        .self-checkbox-header,
        .el-icon-view {
          display: none;
        }

        .el-icon-d-arrow-right {
          cursor: pointer;
          display: inline-block;
        }
      }

      // .none-self-header-hiden-column {
      //     display: none;
      //     .self-header-column &:hover,
      //     span,
      //     .self-checkbox-header,
      //     .el-icon-view,
      //     .el-icon-d-arrow-right {
      //         display: none;
      //     }
      // }
    }
  }

  // 表内容
  .el-table__body-wrapper,
  .el-table__fixed-body-wrapper {
    // overflow: scroll;
    overflow: auto;

    &::after {
      position: relative;
    }

    .el-table__body {

      // background: $table-bg-color;
      tr:nth-child(odd) {
        background: $table-bg-color1;
      }

      tr:nth-child(even) {
        background: $table-bg-color;
      }

      .el-table__row {
        .el-checkbox {
          .el-checkbox__inner {
            background-color: $checkbox-unchecked-bg-color;
            border-color: $checkbox-unchecked-border-color !important;
          }

          .el-checkbox__input.is-checked .el-checkbox__inner,
          .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            background-color: $checkbox-checked-bg-color;
            border-color: $checkbox-checked-border-color !important;
          }
        }

        td {
          // &:last-of-type {
          //   border-left: 1px solid #9cb5d6;
          //   border-color: rgba($color: #9cb5d6, $alpha: 0.2);
          // }
          background: transparent !important;
          // color: $text-color;
          color: $assist-text-color;
          border-bottom: none;
          padding: 6px 0;
          height: 35px;

          .cell {
            .el-table__indent {
              &::before {
                // content: "-";
              }
            }
          }
        }

        .column-highlight {
          background: $table-highlight-bg-color;
        }
      }

      .expanded {
        .el-table__expand-icon {
          color: $table-highlight-color;

          .el-icon-arrow-right {
            &::before {
              content: "|";
              font-weight: bold;
            }
          }
        }

        .el-table__expand-icon--expanded {
          transform: none;
        }
      }
    }
  }

  // 操作列
  .el-table__fixed {
    // box-shadow: -10px 0px 10px rgba(0,0,0,0.35) inset!important;
    // border-right: 1px solid;
    height: 100% !important; //设置高优先，以覆盖内联样式
    border-color: $table-border-color;

    &:before {
      height: 0;
    }
  }

  .el-table__fixed-right {
    // box-shadow: -10px 0px 10px rgba(0,0,0,0.35)!important;
    // border-left: 1px solid;
    border-color: $table-border-color;

    &::before {
      height: 0;
    }

    right: 0 !important;
  }

  .el-table__fixed-right-patch {
    // background-color: rgba(0, 35, 71, 0.8);
    border-bottom: none;
  }

  // 右侧操作栏
  .fixed-right {
    display: inline-block;
    color: $clickable-color;
    font-weight: 400;
    font-size: 14px;
    padding: 0 5px;

    .hidden-text {
      cursor: pointer;
    }

    .hidden-dividing {
      display: inline-block;
      width: 1px;
      height: 10px;
      margin-left: 10px;
      background-color: $table-operate-dividing-color;
    }
  }

  .fixed-right:last-child {
    .hidden-dividing {
      display: none;
    }
  }

  // 表footer,合计行样式
  .el-table__footer-wrapper .el-table__footer tbody td {
    background-color: $table-bg-color;
    color: $table-highlight-color;
    border-top: 1px solid $table-border-color;
    border-bottom: none;
    padding: 6px 0;
    height: 20px;
    line-height: 32px;

    .cell {
      line-height: 32px;
    }
  }

  .el-table__footer-wrapper .el-table__footer,
  .el-table__fixed-footer-wrapper tbody td {
    background-color: $table-bg-color;
    color: $table-highlight-color;
    border-top: 1px solid $table-border-color;
    border-bottom: none;
    border: none;
    padding: 6px 0;
    height: 20px;
    line-height: 32px;

    .cell {
      line-height: 32px;
    }
  }

  .el-table__fixed-footer-wrapper {
    right: 4px;
  }

  .el-table td,
  th {
    padding: 6px 0
  }

  .el-table--fixed__virtual-wrapper {
    width: 100% !important;
  }
}

// tab选项
.el-tabs {
  .el-tabs__header {}

  .el-tabs__item {
    color: $text-color;
  }

  .el-tabs__item.is-active {
    color: $text-active-color;
  }

  .el-tabs__active-bar {
    background-color: $text-active-color;
  }

  .el-tabs__nav-wrap::after {
    opacity: 0;
  }
}

// 隐藏按钮气泡及图标样式
.hidentooltip {
  width: 48px;
  height: 28px;
  background: #bac9dc !important;
  border-color: #bac9dc !important;
  color: #001a36;
  padding-top: 7px;
  font-weight: 400;
}

.hidentooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-width: 0px;
}

.hidentooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
  border-top-width: 0px;
}

// 气泡框样式
.el-popover {
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
  background-color: $moudle-color;
  border-color: $border-color;
  min-width: unset;
}

// popover弹出框
.el-popper[x-placement^=bottom] {
  margin-top: 5px;
}

.el-popper,
.el-select-dropdown {
  background-color: $select-dropdown-bg-color;
  color: $select-dropdown-color;
  box-shadow: 0px 14px 20px 0px rgba(9, 25, 55, 0.41);
  margin: 0px;
  border: 0px;
  padding: 10px;

  .el-dropdown-menu__item {
    color: #959FC5;
    height: 36px;
    line-height: 36px;
  }

  .el-dropdown-menu__item--divided {
    margin-top: 0;
  }

  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: $moudle-color;
    color: #fff;
  }

  .el-dropdown-menu__item--divided:before {
    display: none;
  }

  .el-dropdown-menu__item--divided {
    border-top: 1px solid $border-color;
  }

  .popper__arrow {
    display: none;
  }
}

// input框样式
.el-input {
  .el-input__icon {
    line-height: 30px;
  }

  .el-input__inner {
    height: 30px;
    line-height: 30px;
    border: 1px solid $border-color;
    color: $serach-label-color !important;
    background-color: $input-bg-color;

    input {
      background-color: $input-bg-color;
      color: $input-text-color;
    }
  }

  .el-input__inner:hover {
    border-color: $input-hover-border-color;
    color: $input-text-color;
  }
}

// form表单样式
.el-form {
  .el-form-item {
    margin-bottom: 10px;

    .el-form-item__label {
      line-height: 30px;
      font-size: 14px;
      color: $serach-label-color;
    }

    .el-icon-date,
    .el-range__close-icon {
      line-height: 22px;
    }

    .el-range-separator {
      line-height: 22px;
      margin-right: 6px;
    }

    .el-form-item__content {
      line-height: 30px;

      // input框样式
      .el-input__inner {
        height: 30px;
        line-height: 30px;
        width: 200px;
        border: 1px solid $border-color;
        color: $serach-label-color;
        background-color: $input-bg-color;

        input {
          background-color: $input-bg-color;
          color: $input-text-color;
        }

        .el-range-separator,
        .el-range__icon,
        .el-range__close-icon {
          color: $input-text-color;
        }
      }

      .el-date-editor--daterange {
        width: 240px;
      }
    }
  }
}

// 按钮样式(search-header以及右侧悬浮搜索)
.btn {
  width: auto;
  height: 30px !important;
  line-height: 0;
  padding: 8px 15px !important;
  color: $default-btn-text-color !important;
  background-color: $default-btn-bg-color !important;
  border: 1px solid $default-btn-border-color !important;
  border-radius: 2px;

  .el-icon-view {
    &::before {
      margin-right: 3px;
      font-size: 13px;
    }
  }

  .menu-icon {
    width: 14px;
    height: 14px;
  }

  img {
    margin-right: 5px;
    vertical-align: text-bottom;
  }

  &:hover {
    background-color: $default-btn-bg-color !important;
    border: 1px solid $default-btn-border-color !important;
  }

  &:focus {
    background-color: $default-btn-mouseover-border-color !important;
    border: 1px solid $default-btn-mousedown-bg-color !important;
  }
}

// 右侧按钮
.gray-btn {
  width: auto;
  height: 30px !important;
  line-height: 0;
  padding: 8px 15px !important;
  color: $default-btn-text-color !important;
  background: $icon-color5 !important;
  border-radius: 2px;

  // background-color: $default-btn-bg-color !important;
  // border: 1px solid $default-btn-border-color !important;
  .el-icon-view {
    &::before {
      margin-right: 3px;
      font-size: 13px;
    }
  }

  .menu-icon {
    width: 14px;
    height: 14px;
  }

  img {
    margin-right: 5px;
    vertical-align: text-bottom;
  }

  &:hover {
    color: $default-btn-text-color !important;
    background: $icon-color5 !important;
  }

  &:focus {
    color: $default-btn-text-color !important;
    background: $icon-color5 !important;
  }

  // &:hover {
  //   background-color: $default-btn-bg-color !important;
  //   border: 1px solid $default-btn-mousedown-bg-color !important;
  // }

  // &:focus {
  //   background-color: $default-btn-mouseover-border-color !important;
  //   border: 1px solid $default-btn-mousedown-bg-color !important;
  // }
}

// 下拉框样式
.el-select-dropdown {
  background-color: $select-dropdown-bg-color;
  color: $select-dropdown-color;
  box-shadow: 0px 14px 20px 0px rgba(9, 25, 55, 0.41);
  margin: 0px;
  border: 0px;

  .popper__arrow {
    // display: none;
    border-bottom-color: $select-dropdown-bg-color !important;
  }

  .popper__arrow::after {
    border-bottom-color: $select-dropdown-bg-color !important;
  }

  .el-select-dropdown__item {
    background-color: $select-dropdown-bg-color;
    color: $select-dropdown-color;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }

  .el-select-dropdown__item.hover {
    background-color: $select-dropdown-hover-bg-color;
    color: $select-dropdown-hover-color;
  }

  .el-select-dropdown__item.selected {
    background-color: $select-dropdown-selected-bg-color;
    color: $select-dropdown-selected-color;
  }

  .el-select-dropdown__item.is-disabled {
    background-color: $select-dropdown-disabled-bg-color;
    color: $select-dropdown-disabled-color;
  }
}

.el-select-dropdown,
.is-multiple {
  background-color: $select-dropdown-bg-color;
  color: $select-dropdown-color;
  margin: 0px;
  border: 0px;
  box-shadow: 0px 14px 20px 0px rgba(9, 25, 55, 0.41);
  border: 0;

  .el-select-dropdown__item {
    background-color: $select-dropdown-bg-color;
    color: $select-dropdown-color;
    height: 32px;
    line-height: 32px;
    font-size: 14px;

    .self-select {
      display: flex;
      align-items: center;

      .select-checked {
        width: 14px;
        height: 14px;
        background-color: $checkbox-checked-bg-color;
        border-color: $checkbox-unchecked-border-color;
        display: inline-block;
        position: relative;
        white-space: nowrap;
        border-radius: 2px;
        box-sizing: border-box;

        &::after {
          box-sizing: content-box;
          content: "";
          border: 1px solid $serach-label-color;
          border-left: 0;
          border-top: 0;
          height: 7px;
          left: 5px;
          position: absolute;
          top: 2px;
          transform: rotate(45deg) scaleY(0);
          width: 3px;
          transition: transform .15s ease-in .05s;
          transform-origin: center;
          transform: rotate(45deg) scaleY(1);
        }
      }

      .select-unchecked {
        width: 14px;
        height: 14px;
        background-color: $checkbox-checked-bg-color;
        border-color: $checkbox-unchecked-border-color;
        display: inline-block;
      }

      .select-value {
        margin-left: 10px;
      }
    }


    .select-span {
      margin-left: 15px;
    }
  }

  .el-select-dropdown__item.selected {
    background-color: $select-dropdown-bg-color !important;
    color: $select-dropdown-hover-color !important;
    font-weight: normal !important;

    &::after {
      content: '' !important;
    }

    &:hover {
      background-color: $select-dropdown-hover-bg-color !important;
      color: $select-dropdown-hover-color !important;
    }
  }

  .el-select-dropdown__item.hover {
    background-color: $select-dropdown-hover-bg-color;
    color: $select-dropdown-hover-color;
  }

  .popper__arrow {
    border-style: none;

    &::after {
      border-style: none;
    }
  }

  .el-checkbox {

    // 多选框下全选样式
    .el-checkbox__inner {
      background-color: transparent;
      border: 1px solid $border-color;
    }

    .el-checkbox__label {
      color: $serach-label-color;
    }
  }
}

// badge图表的样式
.el-badge__content {
  border: none;
}

// 滚动条样式
.el-scrollbar {
  .el-scrollbar__bar {
    position: absolute;
  }

  .el-scrollbar__wrap {
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .is-horizontal {
    height: 6px !important;
  }

  .el-scrollbar__bar .is-horizontal {
    z-index: 1;
  }
}

// 菜单样式
// 折叠
.el-menu--collapse {
  width: 55px;
}

.el-menu--vertical {
  .el-submenu {
    .el-submenu__title {
      background: $moudle-color;
      color: $text-color;
      font-size: 16px;
      height: 50px;
      line-height: 50px;
      padding: 0 16px;

      &:hover,
      &:focus {
        color: $title-color;
        background: $backgroud-color;
      }

      .menu-icon {
        width: 14px;
        height: 14px;
      }

      img {
        margin-right: 20px;
      }

      [class^="el-icon-"] {
        margin-right: 20px;
      }
    }
  }
}

// 展开
.el-menu {
  border: none;
  background: $moudle-color;
  color: $text-color;

  .el-submenu.is-open {
    z-index: 999;
  }

  .is-active {
    color: $title-color !important;
    background: $backgroud-color !important;
  }

  .el-menu-item {
    background: $moudle-color;
    color: $text-color;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    padding: 0 16px;

    .menu-icon {
      width: 14px;
      height: 14px;
    }

    img {
      margin-right: 8px;
    }

    [class^="el-icon-"] {
      margin-right: 20px;
    }

    &:hover,
    &:focus {
      color: $title-color;
      background: $backgroud-color;
    }

    span {
      display: inline-block;
      white-space: normal;
      line-height: 20px;
    }
  }

  .el-menu-item.is-active {
    &::before {
      content: "";
      height: 50px;
      width: 4px;
      background: $highlight-color;
      display: inline-block;
      position: absolute;
      left: 0;
    }
  }

  // 一级菜单
  .menue-level-one {
    .el-submenu__title {
      background: $moudle-color;
      color: $text-color;
      font-size: 16px;
      height: 50px;
      line-height: 50px;
      padding: 0 16px;

      &:hover,
      &:focus {
        color: $title-color;
        background: $backgroud-color;
      }

      .menu-icon {
        width: 14px;
        height: 14px;
      }

      img {
        margin-right: 8px;
      }

      [class^="el-icon-"] {
        margin-right: 20px;
      }

      .el-menu {
        .menu-wrapper {
          .el-menu-item {
            padding-left: 40px;
          }

          .el-menu-item.is-active {
            &::before {
              content: "";
              height: 50px;
              width: 4px;
              background: $highlight-color;
              display: inline-block;
              position: absolute;
              left: 0;
            }
          }
        }
      }

      // 兼容ie
      .ie-menue-level-two {
        .el-submenu__title {
          padding: 0 16px;
        }
      }
    }
  }
}

/* 时间选择器样式 */
.el-picker-panel {
  color: $text-color;
  background: $moudle-color;
  border: 1px solid $border-color;
}

.el-date-table td.next-month,
.el-date-table td.prev-month {
  color: $date-next-month-prev-month-color;
}

.el-date-picker__header-label,
.el-year-table td .cell,
.el-month-table td .cell {
  // color: $date-cell-color;
}

.el-date-picker__header-label.active,
.el-date-picker__header-label:hover {
  color: $date-hover-color;
}

.el-year-table td .cell:hover,
.el-year-table td.current:not(.disabled) .cell {
  color: $date-hover-color;
}

.el-month-table td .cell:hover,
.el-month-table td.current:not(.disabled) .cell {
  color: $date-hover-color;
}

.el-date-table th {
  color: $date-cell-color;
  border-bottom: 1px solid $border-color;
}

.el-date-picker__header--bordered {
  border-bottom: 1px solid $border-color;
}

.el-picker-panel__icon-btn {
  color: $date-icon-btn-color;
}

.el-picker-panel__icon-btn:hover {
  color: $date-hover-color;
}

.el-date-table td.available:hover {
  color: $date-hover-color;
}

.el-picker-panel__icon-btn.is-disabled {
  color: $date-icon-btn-color;
}

.el-date-range-picker__content.is-left {
  border-right: 1px solid $border-color;
}

.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: $date-hove-range-color;
}

.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: $date-hover-color;
}

.el-date-table td.current:not(.disabled) span {
  background-color: $date-hover-color;
}

.el-date-table td.today span {
  color: $date-hover-color;
}

// 抽屉样式
.el-drawer.drawer-table {
  border-top: 4px solid $highlight-color;
  background: $moudle-color !important;

  .el-drawer__header {
    color: $title-color;
    border-bottom: 1px solid $border-color;
    font-size: 16px;
    padding: 10px 16px !important;
    margin: 0;

    div:first-child {
      align-items: center;
    }
  }

  .el-drawer__body {
    padding: 16px;

    .table-body {
      margin: 0;
    }
  }

  .el-drawer__close-btn {
    font-size: 18px;
    color: $highlight-color;
  }

  .el-button--text {
    color: $highlight-color;
    margin-left: 20px;
  }

}

/* 多选框样式 */

.el-select {
  .el-tag {
    background-color: $input-bg-color;
    border: 0;
    padding: 0;

    &::after {
      content: ','
    }

    &:first-of-type {
      margin-left: 10px;
    }

    .el-select__tags-text {
      color: $input-text-color;
    }

    .el-tag__close {
      display: none;
    }
  }
}

.el-popper[x-placement^=bottom] {
  margin-top: 5px;
}


/* 浏览器默认滚动条 */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-thumb {
  background-color: $scrollbar-bg-color;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: $scrollbar-bg-color;
  border-radius: 3px;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

.data-analysis-left {
  .el-calendar__body {
    .el-calendar-table .el-calendar-day {
      height: 60px !important;
      text-align: center;
    }
  }
}